<template>
  <div class="wrap">
    <div v-if="resBankList.length > 0">
      <div class="item" v-for="(item, index) in resBankList" :key="index">
        <img src="@/assets/bankCard2.png" alt="" class="bankCardImg" @click="jumpBack(item)"/>
        <div class="cardInfoWrap" @click="jumpBack(item)">
          <p class="cardName">{{ item.bankName }}</p>
          <p class="cardNum">{{ item.cardNum }}</p>
        </div>
        <div class="btn" @click="unbindBankCard(item.id)">解绑</div>
      </div>
    </div>
    <div class="noInfo" v-if="resBankList.length == 0">暂无绑定的银行卡</div>
    <div class="btnSure" @click="addCard">添加</div>
    <div class="maskWrap" v-if="payMask">
        <div class="maskBg" @click="payMask = false"></div>
        <div class="chooseNumWrap">
          <div class="maskTitle">余额支付密码</div>
          <div class="explain">请输入余额支付密码,以验证身份</div>
          <div class="maskExpalin">
            <van-password-input
              :value="value"
              info="密码为 6 位数字"
              :focused="showKeyboard"
              @focus="showKeyboard = true"
            />
            <van-number-keyboard
              v-model="value"
              :show="showKeyboard"
              @blur="showKeyboard = true"
            />
          </div>
          <div class="maskBack" @click="payMask = false,value='',redLoseId='',addOrDele=''">返回</div>
        </div>
      </div>
  </div>
</template>

<script>
import { RadioGroup,PasswordInput,NumberKeyboard,Dialog  } from "vant";
import {
  apiCheckPayPassword,
  apiGetUserBankList,
  apiDeleteUserBank,
  apiAppUserInfo
} from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      money: "100", //输入的钱
      shopId: "",
      resPayInfo: "",
      resBankList: [], //银行卡列表
      payMask:false,
      value:'',
      showKeyboard: true,
      redLoseId:'',//解绑银行卡id
      fromId:this.$route.query.fromId,//0为提现页面 选择提现到的银行卡，1为押金赎回页面 
      addOrDele:'',//0是添加操作，1是解绑操作
      isPayPassword:'',
    };
  },
  watch: {
    value(value) {
      if (this.value.length == 6) {
        console.log("输入完成");
        if(this.addOrDele==0){
           this.addBankCard()
        }else if(this.addOrDele==1){
           this.unbindBankCardStep2()
        }
      }
    },
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    this.getUserBankList();
    this.getAppUserInfo()
  },
  methods: {
    //银行卡列表:
    getUserBankList() {
      apiGetUserBankList({}).then((res) => {
        this.resBankList = res.data;
        console.log("银行卡列表", this.resBankList);
      });
    },
    //获取个人信息，判断是否设置初始支付密码
    getAppUserInfo() {
      apiAppUserInfo({}).then((res) => {
        this.isPayPassword = res.data.isPayPassword;
      });
    },
    //添加银行卡：
    addBankCard() {
       apiCheckPayPassword({
        payPassword: this.value,
      }).then((res) => {
        if (res.data == true) {
          this.$router.push({
            path: "/pages/bSetBankCard",
            query: {
              //传递参数
            },
          });
        } else {
          this.$toast.fail("原支付密码有误，请重新输入");
        }
      });
    },
    //添加银行卡
    addCard(){
      if(this.isPayPassword){
         this.payMask=true
         this.addOrDele=0
      }else{
        this.$toast.fail('请前往钱包中心设置余额初始支付密码!')
      }
    },
     //解绑：第一步
    unbindBankCard(i) {
      this.redLoseId = i
      this.payMask = true
      this.addOrDele=1
    },

    //解绑：第二步
    unbindBankCardStep2() {
      var that = this
      Dialog.confirm({
        message: '确认解绑？',
      })
        .then(() => {
          // on confirm
            apiDeleteUserBank({
              id:this.redLoseId,
            }).then((res) => {
              if (res.code == 200) {
                that.getUserBankList()
                this.addOrDele=''
                this.payMask = false
                that.$toast.success("解绑成功");
              } 
            });
        })
        .catch(() => {
          // on cancel
        });
    },

    jumpBack(dataItem){
      if(this.fromId == 0){ //从提现页面来的
          this.$router.push({
            path: "/pages/bReplyWithdraw",
            query: {
              //传递参数
              chooseBankCar:dataItem
            },
          });
      }else if(this.fromId == 1){ //从押金赎回页面来的
          this.$router.push({
            path: "/pages/bCashPledgeRedemption",
            query: {
              //传递参数
              chooseBankCar:dataItem
            },
          });
      }
    },
  },
  created() {},
  components: {
    [RadioGroup.name]: RadioGroup,  
    [PasswordInput.name]: PasswordInput,
    [NumberKeyboard.name]: NumberKeyboard,
    [Dialog .name]:Dialog 
  },
};
</script>

<style scoped>
.wrap {
}

.item {
  width: 95%;
  margin: 0 auto;
  background-color: #f79360;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  height: 125px;
  border-radius: 20px;
  margin-top: 20px;
}
.item:nth-child(2n) {
  background-color: #4a79f4;
}
.bankCardImg {
  width: 33px;
  height: 33px;
  float: left;
  margin-top: 35px;
  margin-left: 20px;
}
.cardInfoWrap {
  float: left;
  margin-left: 10px;
  margin-top: 40px;
}
.cardName {
  font-size: 16px;
}
.cardNum {
  font-size: 16px;
  margin-top: 15px;
}
.btn {
  float: right;
  width: 65px;
  height: 30px;
  border: 2px solid #ffffff;
  border-radius: 15px;
  font-size: 13px;
  margin-top: 40px;
  margin-right: 20px;
  text-align: center;
  line-height: 30px;
}
.noInfo {
  text-align: center;
  margin-top: 20vh;
  font-size: 16px;
  font-weight: 600;
}
.btnSure {
  width: 95%;
  position: fixed;
  left: 2.5%;
  bottom: 20px;
  height: 50px;
  line-height: 50px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}
.maskWrap {
}
.maskBg {
  width: 100%;
  min-height: 100vh;
  opacity: 0.35;
  background-color: #000;
  position: fixed;
  top: 0px;
}
.chooseNumWrap {
  width: calc(90% - 30px);
  background-color: #fff;
  position: fixed;
  top: 15vh;
  border-radius: 20px;
  color: #181818;
  margin-left: 5%;
  padding: 15px;
}
.maskTitle {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.explain {
  font-size: 12px;
  color: #999;
  text-align: center;
  margin-bottom: 10px;
}
.maskExpalin {
  font-size: 10px;
  font-weight: 300;
  line-height: 20px;
}
.maskBack {
  width: 115px;
  height: 34px;
  line-height: 34px;
  background: #181818;
  border-radius: 17px;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  margin-top: 22px;
}
</style>
